<!-- 首页 -->
<template>
	<view class="container">
		<van-picker :columns="columns" @change="handleChange" :loading="pickerLoading"></van-picker>
	</view>
</template>

<script>
	import {
		educationList
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		props: ['value'],
		data() {
			return {
				pickerLoading: false,
				columns: [{
						values: [],
						defaultIndex: 0,
					},
					{
						values: [],
						defaultIndex: 0,
					},
				]
			}
		},
		watch: {
			value: {
				immediate: true,
				async handler(value) {
					if (!this.columns[0].values.length) {
						await this.getList()
					}
					if (value) {
						// 将 value 拆分为数组
						const values = value.split('/');
						// 遍历 columns 和 values
						this.columns.forEach((column, index) => {
							const targetValue = values[index]; // 当前列对应的值
							const valueIndex = column.values.indexOf(targetValue); // 查找值对应的下标
							// 如果找到对应的值，更新 defaultIndex
							if (valueIndex !== -1) {
								this.$set(this.columns[index], 'defaultIndex', valueIndex)
							}
						});
					} else {
						// 默认选中项
						this.$emit('input', this.columns[0]['values'][0] + '/' + this.columns[1]['values'][0])
					}
				}
			}
		},
		methods: {
			async getList() {
				this.pickerLoading = true
				await educationList().then(res => {
					let {
						data
					} = res
					let column_1 = data?.map(item => item.title) ?? []
					let column_2 = data?.[1]?.children?.map(item => item.title) ?? []
					let columns = [
						// 第一列
						{
							values: column_1,
							defaultIndex: 0,
						},
						// 第二列
						{
							values: column_2,
							defaultIndex: 0,
						},
					]
					this.pickerLoading = false
					this.columns = columns
				})
			},
			handleChange(picker) {
				let {
					detail: {
						value
					}
				} = picker
				this.$emit('input', value.join('/'))
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {}
</style>